<template>
  <div class="resizer-wrapper">
    <!--<div v-for="(item,index) in state.disk_arr"-->
    <!--     class="item-block"-->
    <!--     :style="{flexGrow:item.max}"-->
    <!--&gt;-->
    <!--  -->
    <!--  &lt;!&ndash;<div class="item-inner"></div>&ndash;&gt;-->

    <!--</div>-->
    <template v-for="(item,index) in state.disk_arr" :key="index">
      <div class="round-wrapper">
        <div v-if="index>0"
             class="round"
             @mousedown="startResize($event,item,index)"
             @mousemove="onResize($event,item,index)"
             @mouseup="endResize($event,item,index)"
        >
          <i class="fa fa-arrows-h"></i>
        </div>
      </div>

      <div :ref="el=>state.disk_arr[index].ele = el" :style="{width:`${item.percent}%`}"
           class="item-block">
        {{ item.name }} 剩余空间 {{ item.value }}

      </div>

    </template>

  </div>
</template>

<script>
import {computed, ref, reactive, onMounted, watchEffect, onBeforeUpdate, onUpdated, toRef} from "vue"

export default {
  name: "resizer",
  setup() {
    const state = reactive({
          disk_arr: [
            {
              name: '磁盘A',
              value: 12,
              max: 90,
              percent: null,
              ele: null,
            },
            {
              name: '磁盘B',
              value: 12,
              max: 80,
              percent: null,
              ele: null,
            },
            {
              name: '磁盘C',
              value: 12,
              max: 20,
              percent: null,
              ele: null,
            },
          ],
          isResizing: false,
          startX: null,
          offsetX: null,
          currentX: null,

        }
    )
    //总容量
    const total = computed(() => {
      let total_num = 0
      state.disk_arr.forEach(item => total_num += item.max)
      console.log('total_num', total_num)
      return total_num
    })


    onMounted(() => {
      state.disk_arr.forEach(item => {
        item.percent = computed(() => {
           let res = ((item.max / total.value).toFixed(4)*100)
          return res
        })
        console.log('computed item', item)
      })
    })

    //开始拖动调整
    function startResize($event, item, index) {
      state.isResizing = true
      state.startX = $event.pageX
      console.log('startResize state.startX', state.startX)
    }

    //拖动ing
    function onResize($event, item, index) {
      // 正在拖拽中,则开始进行百分比调整
      if (state.isResizing) {

        // 获得当前横坐标和页面的边距
        state.currentX = $event.pageX

        // 获得当前的偏移量
        state.offsetX = state.startX - state.currentX

        console.log('onResize toLeft', state.currentX)

        // 获得当前偏移量,根据此偏移量的正负,来确定本元素和前一个元素的偏移调整位置


        let lastItem = state.disk_arr[index - 1]
        console.log('item', toRef(item))
        console.log('lastItem', toRef(lastItem))
      }
    }

    // 结束拖动
    function endResize($event, item, index) {
      state.isResizing = false
      console.log('endResize toLeft', state.offsetX)
    }

    return {
      state,
      total,
      startResize,
      onResize,
      endResize,
    }
  }
}
</script>

<style lang="scss" scoped>
.resizer-wrapper {
  display: flex;
  flex-direction: row;
  border: 1px solid #aaa;
  border-radius: 4px;
  height: 60px;
  position: relative;

  .item-block {
    display: flex;
    flex-shrink: 1;
    flex-grow: 1;
    width: 60px;
    justify-content: center;
    align-items: center;
    min-width: 4px;
    background-color: cornflowerblue;

    //height: 100%;

    border: 1px solid #ccc;
    margin: 2px;
    position: relative;
    font-size: 10px;
    border-radius: 4px;

    .item-inner {
      position: absolute;
      display: flex;
      //align-self: flex-start;
      //justify-self: flex-start;
      //align-self: left;
      background-color: deepskyblue;

      width: 20px;
      height: 100%;
      //h
    }
  }

  .round-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .round {
      position: absolute;
      margin: auto;
      width: 20px;
      z-index: 5;
      height: 20px;
      background-color: #bbb;
      border: 1px solid #aaa;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      //left: -15px;
      color: #fff;
      align-self: center;
      transition: all .2s;
      font-size: 10px;
      //visibility: hidden;
      &:hover {
        color: orange;
        //visibility: visible;
      }
    }
  }

}
</style>
